<template>
	<view class="cmAdd-page">
		<view class="main-content">
			<view class="formContainer">
				<!-- 违规消纳 -->
				<view class="line"></view>
				<u-form v-model="form" ref='uForm' v-if="reporttype==0">
					
					<u-form-item label="经营单位:" label-width="200" prop="applyUnit">
						<input class="input" v-model="form.applyUnit" type="number" placeholder="请输入经营单位"
							input-align="right" />
					</u-form-item>
					<u-form-item label="归属地:" label-width="200" prop="attribution">
						<input class="input" v-model="form.attribution" type="text" placeholder="请输入归属地" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="宕渣处置量–单位：立方米:" label-width="200" prop="dangHandleQuantity">
						<input class="input" v-model="form.dangHandleQuantity" type="text" placeholder="请输入宕渣处置量"
							input-align="right" />
					</u-form-item>
					<u-form-item label="防尘降尘（附件图片）:" label-width="200" prop="dustControl">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="出土口道路硬化:" label-width="200" prop="excavatedMouthRoadSclerosis">
						<input class="input" v-model="form.excavatedMouthRoadSclerosis" type="text" placeholder="请输入出土口道路硬化"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="场地地址:" label-width="200" prop="fieldAddress">
						<input class="input" v-model="form.fieldAddress" type="text" placeholder="请输入场地地址" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="场地名称:" label-width="200" prop="fieldName">
						<input class="input" v-model="form.fieldName" type="text" placeholder="请输入场地名称" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="场地属性:" label-width="200" prop="fieldProperty">
						<input class="input" v-model="form.fieldProperty" type="area"
							placeholder="请输入场地属性" @click="" input-align="right" />
					</u-form-item>
					<u-form-item label="场地规模:" label-width="200" prop="fieldScale">
						<input class="input" v-model="form.fieldScale" type="area" placeholder="请输入场地规模"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="场地性质:" label-width="200" prop="fieldType">
						<input class="input" v-model="form.fieldType" type="area" placeholder="请输入场地性质"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="违规工单数:" label-width="200" prop="illegalWorkOrderNum">
						<input class="input" v-model="form.illegalWorkOrderNum" type="area" placeholder="请输入违规工单数" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="土地证:" label-width="200" prop="landCertificate">
						<input class="input" v-model="form.landCertificate" type="area" placeholder="请输入土地证"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="土地性质:" label-width="200" prop="landNature">
						<input class="input" v-model="form.landNature" type="area" placeholder="请输入土地性质"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="法人:" label-width="200" prop="legalPerson">
						<input class="input" v-model="form.legalPerson" type="area" placeholder="请输入法人" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="法人联系方式:" label-width="200" prop="legalPhone">
						<input class="input" v-model="form.legalPhone" type="area" placeholder="请输入法人联系方式" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="预计全年处置量–单位：万方:" label-width="200" prop="annualHandleQuantity">
						<input class="input" v-model="form.annualHandleQuantity" type="text" placeholder="请输入全年处置量" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="黄土出土量–单位：立方米:" label-width="200" prop="loessEarthQuantity">
						<input class="input" v-model="form.loessEarthQuantity" type="area" placeholder="请输入黄土出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="最大处置量-单位：立方米:" label-width="200" prop="maxHandleNum">
						<input class="input" v-model="form.maxHandleNum" type="area" placeholder="请输入最大处置量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="渣土处置量–单位：立方米" label-width="200" prop="muckHandleQuantity">
						<input class="input" v-model="form.muckHandleQuantity" type="area" placeholder="请输入渣土处置量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="其他处置量–单位：吨" label-width="200" prop="otherHandleQuantity">
						<input class="input" v-model="form.otherHandleQuantity" type="area" placeholder="请输入其他处置量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="种植土处置量–单位：立方米" label-width="200" prop="plantingSoilHandleQuantity">
						<input class="input" v-model="form.plantingSoilHandleQuantity" type="area" placeholder="请输入种植土处置量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="项目属性:" label-width="200" prop="projectProperty">
						<input class="input" v-model="form.projectProperty" type="area" placeholder="请输入项目属性" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="上报来源:" label-width="200" prop="reportSource">
						<input class="input" v-model="form.reportSource" type="area" placeholder="请输入上报来源" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="地块编号:" label-width="200" prop="siteNum">
						<input class="input" v-model="form.siteNum" type="area" placeholder="请输入地块编号" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="泥浆处置量–单位：吨:" label-width="200" prop="slurryHandleQuantity">
						<input class="input" v-model="form.slurryHandleQuantity" type="area" placeholder="请输入泥浆处置量" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="所属街道:" label-width="200" prop="street">
						<input class="input" v-model="form.street" type="area" placeholder="请输入所属街道" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="使用期限结束时间:" label-width="200" prop="useEndTime">
						<input v-if="!showuseEndTime" class="input" v-model="form.useEndTime" type="text"
							placeholder="请选择期限结束时间" @focus="useEndTime=true" input-align="right" />
						<view class="timepicker" v-else>
							<picker class="" mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateuseEndTime">
								<view class="uni-input">{{date}}-</view>
							</picker>
							<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeuseEndTime">
								<view class="uni-input">{{time}}:00</view>
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="使用期限开始时间:" label-width="200" prop="useStartTime">
						<input v-if="!showuseStartTime" class="input" v-model="form.useStartTime" type="text"
							placeholder="请选择期限开始时间" @focus="useStartTime=true" input-align="right" />
						<view class="timepicker" v-else>
							<picker class="" mode="date" :value="date1" :start="startDate" :end="endDate"
								@change="bindDateuseStartTime">
								<view class="uni-input">{{date1}}-</view>
							</picker>
							<picker mode="time" :value="time1" start="09:01" end="21:01" @change="bindTimeuseStartTime">
								<view class="uni-input">{{time1}}:00</view>
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="所在街镇:" label-width="200" prop="street">
						<input class="input" v-model="form.street" type="area" placeholder="请输入所在街镇" @click=""
							input-align="right" />
					</u-form-item>
				
					<u-form-item label="用户id:" label-width="200" prop="userId">
						<input class="input" v-model="form.userId" type="area" placeholder="请输入用户id" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="视频/道闸监控（附件图片）:" label-width="200" prop="videoSurveillance">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="村民代表大会会议记录:" label-width="200" prop="villagerCongressRecord">
						<input class="input" v-model="form.villagerCongressRecord" type="area" placeholder="请输入村民代表大会会议记录" @click=""
							input-align="right" />
					</u-form-item>
				
					<u-form-item label="建筑废砖出土量–单位：吨:" label-width="200" prop="wasterHandleQuantity">
						<input class="input" v-model="form.wasterHandleQuantity" type="area" placeholder="请输入建筑废砖出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="冲洗设备（附件图片）:" label-width="200" prop="flushingEquipment">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="地磅（附件图片）:" label-width="200" prop="weighbridge">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>

				</u-form>
			</view>
		</view>
		<!-- 来源 -->
		<u-select v-model="ValidityTermSelectShow" :list="ValidityTermList" @confirm="ValidityTermSelectConfirm"
			:show="true"></u-select>
		<!-- 来源 -->
		<u-select v-model="streetSelectShow" :list="streetList" @confirm="streetSelectConfirm" :show="true"></u-select>

		<u-toast ref="uToast" />
		<view class="footer">
			<button class="cancel" type="default" @click="backtopage">取消</button>
			<button class="confim" type="default" @click="doAdd">提交</button>
		</view>
	</view>

	<!-- 	<view>
			<canvas style="width: 561rpx; height: 720rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
			<img id='imgs' :src="url" mode=""></img>
		</view>
		<button @click="test1">ceshi</button> -->

</template>

<script>
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import {
		getItemOrderList,
		getItemDetail,
		getItemorgList,
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapState
	} from "vuex";
	import timePicker from '@/components/wing-time-selector/wing-time-selector.vue';
	import methodMix from './methodMix_.js'
	export default {
		mixins: [methodMix],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				shareCanvas: '',
				shareUpHead: '',
				white_img: 'http://p8.itc.cn/images01/20200612/4da0b8b6b6c5444699ba4433344bd962.jpeg',
				imagez: 'http://10.214.48.6/skkj/truck_muck/浙F68536911223201735588557picAbbreviate.jpg',
				url: '../../../static/form.jpg',
				processId: '',
				org_id: '',
				form: {
					// address: '山东省日照市东港区学苑路217号日照文化创意产业园',
					annualHandleQuantity: 0,
					applyUnit: "",
					attribution: "",
					dangHandleQuantity: 0,
					dustControl: "",
					excavatedMouthRoadSclerosis: "",
					fieldAddress: "",
					fieldName: "",
					fieldProperty: "",
					fieldScale: "",
					fieldType: 0,
					flushingEquipment: "",
					illegalWorkOrderNum: 0,
					landCertificate: "",
					landNature: "",
					latitude: 111.111,
					legalPerson: "",
					legalPhone: "",
					loessHandleQuantity: 0,
					longitude: 111.111,
					maxHandleNum: 0,
					muckHandleQuantity: 0,
					otherHandleQuantity: 0,
					plantingSoilHandleQuantity: 0,
					projectProperty: "",
					reportSource: 0,
					siteNum: "",
					slurryHandleQuantity: 0,
					street: 0,
					useEndTime: "2021-01-01 00:00:00",
					useStartTime: "2021-01-01 00:00:00",
					userId: "",
					videoSurveillance: "",
					villagerCongressRecord: "",
					wasterHandleQuantity: 0,
					weighbridge: ""

					
				},
				ValidityTermSelectShow: false, //问题类型选择器显隐
				streetSelectShow: false, //大类选择器显隐
				showPicker: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				time: '12:01',
				time1: '12:01',
				time2: '12:01',
				time3: '12:01',
				date: currentDate,
				date1: currentDate,
				date2: currentDate,
				date3: currentDate,
				showuseEndTime: false,
				showuseStartTime: false,
				showclosingTime: false,
				showfilingTime: false,
				showarrestTime: false,
				showdepartureTime: false,
				value: '',
				ValidityTermList: [{
						value: 1,
						label: '是'
					},
					{
						value: 2,
						label: '否'
					}
				],
				streetList: [{
						value: 1,
						label: '武康街道'
					},
					{
						value: 2,
						label: '莫干山镇'
					},
					{
						value: 3,
						label: '阜溪街道'
					},
					{
						value: 4,
						label: '洛舍镇'
					},
					{
						value: 5,
						label: '钟管镇'
					},
					{
						value: 6,
						label: '新市镇'
					},
					{
						value: 7,
						label: '禹越镇'
					},
					{
						value: 8,
						label: '新安镇'
					},
					{
						value: 9,
						label: '雷甸镇'
					},
					{
						value: 10,
						label: '乾元镇'
					},
					{
						value: 11,
						label: '舞阳街道'
					},
					{
						value: 12,
						label: '康乾街道'
					}
				],
				fileChooseTabList: [{
					name: '拍照',
					pic: '/static/reportadd/addph.png'
				}],
				photoList: [], //图片列表
				typeMainList: [],
				typeSubList: [],
				voiceSuccessForm: {}, //语音上传成功返回地址
				rules: {
					Name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur,change'
					}],
					type: [{
						required: true,
						message: '请输入问题类型',
						trigger: 'blur,change'
					}],
					siteConditions: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}],
				},
				tipsContent: '',
				isPlaying: false,
				timeparams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				showtime: false,
				sourceSelectShow: false,
				nowdate: new Date().getFullYear(),
				sbtime: '请选择时间',
				templetes: '模板',
				videoList: [],
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				fileList: [],
				reporttype: 0
			}
		},
		onLoad(op) {
			this.getLocation()
		},
		mounted() {
			this.createOrder()
		},
		methods: {
			//开单流程
			createOrder() {
				getItemOrderList().then(res => {
					console.log(res.rows[0].itemId)
					this.processId = res.rows[0].itemId
					getItemorgList({
						itemId: this.processId
					}).then(res => {
						this.org_id = res[0].org_id
						console.log(res[0].org_id, 666)
					})
					getItemDetail({
						id: res.rows[0].itemId
					}).then(d => {
						console.log(d.formItem.colunm)
						d.formItem.colunm.forEach(n => {
							console.log(n.name)
						})
					})
				})
			},
			test1() {
				let that = this
				var ctx = uni.createCanvasContext('firstCanvas')
				let width_view = 750
				uni.getImageInfo({
					src: 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/lADPDhJzw1ivCibNCjXNB6s_1963_2613jpg_720x720q90gjpg20210712155734155.jpeg',
					success: res => {
						var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
						ctx.drawImage(res.path, 0, 0, 300,
							300) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
						ctx.fillText("内容zymm", 240, 40); //文字内容、x坐标，y坐标
						ctx.font = 'normal 40px STXingkai'; // 字体
						ctx.setFontSize(10); //设置字体大小，默认10
						ctx.setFillStyle('#DD524D');
						ctx.fillText("width:" + ctx.measureText('三生三世').width, 50, 50);
						ctx.save(); //保存
						ctx.draw() //绘制
						setTimeout(() => {
							// canvas操作后最好延时生成图片,不然可能有问题
							let re = uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 561,
								height: 720,
								destWidth: 1122,
								destHeight: 1440,
								quality: 1,
								canvasId: 'firstCanvas',
								success: res => {
									// 在H5平台下，tempFilePath 为 base64  
									console.log(res, that)
									// this.url = res.tempFilePath

									uni.compressImage({
										src: res.tempFilePath,
										quality: 100,
										success: res => {
											let filePath = res.tempFilePath
											uni.uploadFile({
												url: uploadUrl,
												filePath,
												name: 'file',
												formData: {
													itemId: 'chengguansuishoupai'
												},
												success: (
													uploadFileRes
												) => {
													console.log(
														that,
														this)
													console.log(
														uploadFileRes
													)

												},
												fail: err => {
													console.log(
														err)
												}
											});
										}
									})

								}
							});
						}, 200)

					}
				})

			},
			//提交表单
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then((res) => {
					console.log('表单返回得值：', res)
				})
			},
			bindTimeuseEndTime(e, i) {
				console.log(e, i)
				this.time = e.target.value
				this.useEndTime = this.date + ' ' + this.time + ':00'
			},
			bindDateuseEndTime(e, i) {
				console.log(e, i)
				this.date = e.target.value
				this.useEndTime = this.date + ' ' + this.time + ':00'

			},

			//开工时间
			bindTimeuseStartTime(e, i) {
				this.time1 = e.target.value
				this.useStartTime = this.date1 + ' ' + this.time1 + ':00'
			},
			bindDateuseStartTime(e, i) {
				this.date1 = e.target.value
				this.useStartTime = this.date1 + ' ' + this.time1 + ':00'
			},
			//放车时间
			bindTimedepartureTime(e, i) {
				this.time2 = e.target.value
				this.departureTime = this.date2 + ' ' + this.time2 + ':00'
			},
			bindDatedepartureTime(e, i) {
				this.date2 = e.target.value
				this.departureTime = this.date2 + ' ' + this.time2 + ':00'
			},
			//查扣时间
			bindTimearrestTime(e, i) {
				this.time3 = e.target.value
				this.arrestTime = this.date3 + ' ' + this.time3 + ':00'
			},
			bindDatearrestTime(e, i) {
				this.date3 = e.target.value
				this.arrestTime = this.date3 + ' ' + this.time3 + ':00'
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//返回上一级
			backtopage() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	#imgs {
		height: 116rpx;
		width: 116rpx;
		margin-bottom: 22rpx;
	}
	.line{
		height: 20rpx;
		width: 750rpx;
		margin-left: -41rpx;
		background-color: #F2F3F5;
		font-size: 29rpx;
		color: #656A74;
	}
	.footer {
		display: flex;
		width: 100%;
		height: 174rpx;
		background-color: #FFFFFF;
		font-size: 29rpx;
		border-top: 1rpx soild #000000;

		.cancel {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			color: #2E5AFB;
			margin-top: 14rpx;
			margin-left: 29rpx;
		}

		.confim {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			background-color: #2E5AFB;
			color: #FFFFFF;
			margin-top: 14rpx;
			margin-left: 14rpx;
		}
	}

	.cmAdd-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #F2F3F5;
	}

	.main-content {
		flex: 1;
		overflow: auto;


		.formContainer {
			margin-top: 18rpx;
			padding: 18rpx 27rpx 0 41rpx;
			background-color: #FFFFFF;
		}
	}

	.timepicker {

		display: flex;
	}
</style>
